<template>
	<view>
		<view class="background-color_FFFFFF padding_30rpx_0 margin-bottom_20rpx">
			<view class="display-a">
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">
						{{obj.total_play?obj.total_play:0}}
					</view>
					<view>曝光量</view>
				</view>
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">
						{{obj.total_like?obj.total_like:0}}
					</view>
					<view>点赞数</view>
				</view>
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">
						{{obj.total_comment?obj.total_comment:0}}
					</view>
					<view>评论数</view>
				</view>
			</view>
			<view v-if="selLabel == 5" class="display-a margin-top_20rpx">
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">{{obj.danmaku}}
					</view>
					<view>弹幕数</view>
				</view>
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">{{obj.coin}}</view>
					<view>投币数</view>
				</view>
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">{{obj.share}}</view>
					<view>分享数</view>
				</view>
			</view>
			<view v-if="selLabel == 5" class="display-a margin-top_20rpx">
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">{{obj.favorite}}
					</view>
					<view>收藏数</view>
				</view>
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">{{obj.follower}}
					</view>
					<view>粉丝数</view>
				</view>
				<view class="list-label">
					<view class="color_1E6CEB font-size_32rpx font-weight_bold margin-bottom_10rpx">{{obj.following}}
					</view>
					<view>关注数</view>
				</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="list-public" style="padding: 0;">
					<view style="padding: 20rpx;">
						<view class="display-a margin-bottom_10rpx">

							<image v-if="item.avatar" class="head" :src="item.avatar"></image>
							<image v-else class="head" :src="severAvatar"></image>

							<view style="width: 440rpx;">
								<view class="font-size_30rpx margin-bottom_10rpx">
									{{selLabel == 7 ? item.accountName :item.nickname}}
								</view>

								<view class="color_999999 font-size_24rpx">到期时间:
									{{date(item.create_time,item.expires_in)}}
								</view>

							</view>
							<view class="empower" :style="isEmpower(item) ? '' : 'background: #F00;'">
								{{isEmpower(item) ? '授权中' : '已失效'}}
							</view>
							<!-- <view class="empower" :style="isEmpower(item) ? '' : 'background: #F00;'">
								{{isEmpower(item) ? '授权中' : '已失效'}}
							</view> -->
						</view>
						<view class="display-a padding-bottom_20rpx p-bo">
							<view style="width: 100rpx;"></view>
							<view :class="item.groupName ? 'color_1E6CEB' : 'color_999999'">所在分组:
								{{item.group_name?item.group_name:'--'}}
							</view>
						</view>
					</view>



					<view class="display-a padding-bottom_20rpx">
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.total_play?item.total_play:0}}
							</view>
							<view class="color_888">曝光量</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.total_like?item.total_like:0}}
							</view>
							<view class="color_888">点赞数</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.total_comment?item.total_comment:0}}
							</view>
							<view class="color_888">评论数</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label" v-if="selLabel == 5">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.danmaku?item.danmaku:0}}
							</view>
							<view class="color_888">弹幕数</view>
						</view>
						<view class="data-label" v-else>
							<picker mode="selector" @change="bindPickerChange2" :data-userId="item.id"
								:range="groupList" :range-key="'name'">
								<image class="matrix-14" :src="matrix14"></image>
								<view class="color_1E6CEB">换组</view>
							</picker>
						</view>
					</view>
					<view class="display-a padding-bottom_20rpx" v-if="selLabel == 5">
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">{{item.coin?item.coin:0}}
							</view>
							<view class="color_888">投币数</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">{{item.share?item.share:0}}
							</view>
							<view class="color_888">分享数</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.favorite?item.favorite:0}}
							</view>
							<view class="color_888">收藏数</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.follower?item.follower:0}}
							</view>
							<view class="color_888">粉丝数</view>
						</view>
					</view>
					<view class="display-a padding-bottom_20rpx" v-if="selLabel == 5">
						<view class="data-label">
							<view class="color_333333 font-size_30rpx margin-bottom_10rpx">
								{{item.following?item.following:0}}
							</view>
							<view class="color_888">关注数</view>
						</view>
						<view class="data-line"></view>
						<view class="data-label">
							<picker mode="selector" @change="bindPickerChange2" :data-userId="item.id"
								:range="groupList" :range-key="'groupName'">
								<image class="matrix-14" :src="matrix14"></image>
								<view class="color_1E6CEB">换组</view>
							</picker>
						</view>
					</view>
				</view>
			</block>
		</mescroll-body>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				matrixAvatar: this.$imgs.avatar,
				matrix14: this.$imgs.sever14,
				severAvatar: this.$imgs.severAvatar,
				obj: {},

				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},

				selLabel: '', //1抖音h5发布 3矩阵首页待用户发布查询 4矩阵首页快手发布 5.B站

				list: [],

				windowHeight: '',

				groupList: [], //分组列表

			}
		},

		computed: {

			// 是否已授权
			// isEmpower() {
			// 	return function(row) { //使用函数返回
			// 		let isEmpower = false;
			// 		// true,已授权 ,为false，则为已失效
			// 		// row.type  1D音2K手
			// 		isEmpower = new Date(this.msToDate(new Date()).hasTime.replace(/-/g, "\/")) < new Date(this
			// 			.date(row.createTime, row.expiresIn).replace(/-/g, "\/"))
			// 		return isEmpower;
			// 	}
			// },
			// 是否已授权
			isEmpower() {
				return function(row) { //使用函数返回
					let isEmpower = false;
					// true,已授权 ,为false，则为已失效
					// row.type  1D音2K手
					isEmpower = this.selLabel == 7 ? new Date(this.msToDate(new Date()).hasTime.replace(/-/g,
						"\/")) < new Date(row.expirationDate) : (Math.floor(Math.floor(Date.now() / 1000)) < row
						.expires_in)
					return isEmpower;
				}
			},
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }
		},

		onLoad(options) {
			console.log(options)
			//获取系统信息
			this.selLabel = options.selLabel;
			uni.getSystemInfo({
				success: res => {
					if (this.selLabel == 5) {
						this.windowHeight = res.windowHeight * 2 - 394;
					} else {
						this.windowHeight = res.windowHeight * 2 - 174;
					}
				}
			})
			this.obj = JSON.parse(options.obj);
			if (this.obj.id) {
				this.$sun.title("编辑" + this.obj.name);
				this.groupId = this.obj.id;
				this.getGroup();
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			}
		},

		onShow() {

		},

		methods: {

			//账号状态
			bindPickerChange2(e) {
				console.log("---->", e);
				let group_name = this.groupList[e.detail.value].name;
				let group_id = this.groupList[e.detail.value].id;
				let user_id = e.target.dataset.userid;
				this.updataGroup(group_name, group_id, user_id);
			},


			// async updataGroup(group_name, group_id) {
			// 	const result = await this.$http.post({
			// 		url: this.selLabel == 2 ? this.$api.updateGroup : this.$api.accountUpdate,
			// 		data: [{
			// 			groupId: group_id,
			// 			groupName: group_name,
			// 			id: this.listObj.id,
			// 		}]
			// 	});
			// 	if (result.code == 2000) {
			// 		this.$sun.toast(result.msg);
			// 		setTimeout(() => {
			// 			this.$nextTick(() => {
			// 				this.mescroll.resetUpScroll(); 
			// 			});
			// 		}, 2000);
			// 	} else {
			// 		this.$sun.toast(result.msg, 'none');
			// 	}
			// },

			//换分组
			async updataGroup(group_name, group_id, user_id) {
				const result = await this.$http.post({
					url: this.$api.userChange,
					data: {
						target_id: group_id,
						user_id: user_id,
						uid: uni.getStorageSync("uid"),
					}
				});
				if (result.errno == 0) {
					this.$sun.toast(result.message);
					setTimeout(() => {
						this.$nextTick(() => {
							this.mescroll.resetUpScroll();
						});
					}, 2000);
				} else {
					this.$sun.toast(result.message, 'none');
				}
			},


			//分组
			async getGroup() {
				const result = await this.$http.post({
					url: this.$api.groupList,
					data: {
						uid: uni.getStorageSync("uid"),

						type: this.selLabel

					}
				});
				if (result.errno == 0) {
					this.groupList = result.data;
				}
			},

			// async upCallback(scroll) {
			// 	if (this.selLabel == 2) {
			// 		const result = await this.$http.post({
			// 			url: this.selLabel == 1 ? this.$api.zgList : this.$api.dyAuthorizeList,
			// 			data: {
			// 				merchantId: uni.getStorageSync("merchantId"),


			// 				authorizationType: this.selLabel,

			// 				nickname: this.name,
			// 				startTime: this.startTime ? this.startTime + ' 00:00:00' : null,
			// 				endTime: this.endTime ? this.endTime + ' 23:59:59' : null,
			// 				page: scroll.num,
			// 				limit: 10
			// 			}
			// 		});
			// 		if (result.code == 2000) {

			// 			this.mescroll.endByPage(result.data.list.length, result.data.count);
			// 			if (scroll.num == 1) this.list = [];
			// 			this.list = this.list.concat(result.data.list);
			// 		}
			// 	} else {
			// 		const result = await this.$http.post({
			// 			url: this.selLabel == 1 ? this.$api.zgList : this.$api.dyAuthorizeList,
			// 			data: {
			// 				merchantId: uni.getStorageSync("merchantId"),


			// 				authorizationType: this.selLabel,

			// 				nickname: this.name,
			// 				startTime: this.startTime ? this.startTime + ' 00:00:00' : null,
			// 				endTime: this.endTime ? this.endTime + ' 23:59:59' : null,
			// 				page: scroll.num,
			// 				limit: 10
			// 			}
			// 		});
			// 		if (result.code == 2000) {

			// 			this.mescroll.endByPage(result.data.length, result.data.count);
			// 			if (scroll.num == 1) this.list = [];
			// 			this.list = this.list.concat(result.data);
			// 			 this.list= this.buildTree(this.list)
			// 			 console.log(this.list)


			// 		}
			// 	}
			// },

			// async upCallback(scroll) {
			// 			let parm = this.selLabel == 5 || this.selLabel == 4 ? {
			// 				groupId: this.groupId,
			// 				username: uni.getStorageSync("staffCode"),
			// 				page: scroll.num,
			// 				limit: 10
			// 			} : {
			// 				groupId: this.groupId,
			// 				username: uni.getStorageSync("staffCode"),
			// 				// authorizationType 1.机构矩阵(替换 D音H5发布）:2.D音矩阵(替换 代发布到抖音）
			// 				authorizationType: this.selLabel == 3 ? 2 : 1, // 类型 ——需传
			// 				merchantId: uni.getStorageSync('merchantId'), // 商家id ——需传
			// 				page: scroll.num,
			// 				limit: 10
			// 			}
			// 			const result = await this.$http.post({
			// 				url: this.selLabel == 6 ? this.$api.queryXhsList : this.selLabel == 7 ? this
			// 					.$api.querySphAccount : this.selLabel == 5 ? this.$api
			// 					.blBlAccountPage : this.selLabel == 4 || this.selLabel == 1 ? this.$api
			// 					.accountList : this.$api.newAccountQuery,
			// 				data: parm
			// 			});
			// 			if (result.code == 2000) {
			// 				this.mescroll.endByPage(result.data.list.length, result.data.count);
			// 				if (scroll.num == 1) this.list = [];
			// 				this.list = this.list.concat(result.data.list);
			// 			}
			// 		},




			async upCallback(scroll) {


				const result = await this.$http.post({
					url: this.$api.userPage,
					data: {
						uid: uni.getStorageSync("uid"),

						group_id: this.groupId,
						// authorizationType: this.selLabel==3?2:1,
						type: this.selLabel,
						page: scroll.num,
						limit: 10
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}




			},

			// date:创建日期 time：授权过期时间（需加）
			date(date, addTime) {
				console.log(date, addTime)
				// 日期或中国标准时间转毫秒数：
				let result = new Date(addTime * 1000);
				let allDate = null;
				if (this.selLabel == 5) {
					allDate = result + addTime;
				} else {
					allDate = result; // 按秒计算，所以需要*1000（原始毫秒）
				}
				// 预计到期时间计算
				let endtime = this.msToDate(allDate).hasTime
				// 去除秒数截取最后：的前面数字
				let index = endtime.lastIndexOf(":")
				endtime = endtime.substring(0, index);
				return endtime
			},
			// 毫秒数或中国标准时间转日期
			msToDate(msec) {
				let datetime = new Date(msec);
				let year = datetime.getFullYear();
				let month = datetime.getMonth();
				let date = datetime.getDate();
				let hour = datetime.getHours();
				let minute = datetime.getMinutes();
				let second = datetime.getSeconds();
				let result1 = year +
					'-' +
					((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
					'-' +
					((date + 1) < 10 ? '0' + date : date) +
					' ' +
					((hour + 1) < 10 ? '0' + hour : hour) +
					':' +
					((minute + 1) < 10 ? '0' + minute : minute) +
					':' +
					((second + 1) < 10 ? '0' + second : second);

				let result2 = year +
					'-' +
					((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
					'-' +
					((date + 1) < 10 ? '0' + date : date);

				let result = {
					hasTime: result1,
					withoutTime: result2
				};

				return result;
			},


		}
	}
</script>

<style lang="scss">
	.color_888 {
		color: #888;
	}

	.matrix-14 {
		width: 32rpx;
		height: 32rpx;
	}

	.data-line {
		width: 2rpx;
		background-color: #EEEEEF;
		height: 34rpx;
	}

	.data-label {
		width: 174rpx;
		text-align: center;
	}

	.empower {
		background-color: #00D060;
		width: 96rpx;
		text-align: center;
		border-radius: 10rpx;
		padding: 8rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: auto;
	}

	.head {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.color_1E6CEB {
		color: #1E6CEB;
	}

	.list-label {
		width: 250rpx;
		text-align: center;
	}
</style>